<template>
  <div>
    <div class="total">
      <div style="border-bottom: 2px solid #7AFFCC;">
        总充电量: {{ totalCharge.toLocaleString() }} 度
      </div>
      <div style="border-bottom: 2px solid #72DAFF; margin-left: 20px;">
        总充电金额: ¥{{ totalMoney.toLocaleString() }}
      </div>
    </div>
    <div class="chart-container" ref="chartDom"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'TrendRank',
  data() {
    return {
      chart: null,
      totalCharge: 0,
      totalMoney: 0
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
    }
  },
  methods: {
    initChart() {
      const chargeData = [
        68532, 72942, 76382, 68362, 72789, 82825, 91199, 86192, 85823,
        89421, 88421, 93321, 96321, 94321, 92321, 91321, 89321,
        88321, 86321, 91321, 94321, 102321, 111321, 119321, 116321, 106321, 96321, 92321, 89321, 87321
      ]

      const moneyData = [
        54322, 56842, 60382, 53362, 58789, 67825, 75199, 70192, 69823,
        72421, 71421, 76321, 79321, 77321, 75321, 74321, 72321,
        71321, 69321, 74321, 77321, 85321, 94321, 102321, 99321, 90321, 80321, 76321, 73321, 71321
      ]

      // 动态计算总值
      this.totalCharge = chargeData.reduce((a, b) => a + b, 0)
      this.totalMoney = moneyData.reduce((a, b) => a + b, 0)

      this.chart = echarts.init(this.$refs.chartDom)

      const option = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['充电量', '充电金额'],
          right: '5%',
          top: '2%',
          textStyle: {
            color: '#fff'
          },
          icon: 'circle'
        },
        grid: {
          left: '2%',
          right: '2%',
          bottom: '0%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: [
            '15', '16', '17', '18', '19', '20', '21', '22', '23',
            '24', '25', '26', '27', '28', '29', '30', '31',
            '01', '02', '03', '04', '05', '06', '07', '08',
            '09', '10', '11', '12', '13', '14/天'
          ],
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
            }
          },
          axisLabel: {
            color: '#fff'
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
            }
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.1)'
            }
          },
          axisLabel: {
            color: '#fff'
          }
        },
        series: [
          {
            name: '充电量',
            type: 'line',
            smooth: true,
            symbolSize: 8,
            showSymbol: true,
            itemStyle: {
              color: '#7AFFCC'
            },
            lineStyle: {
              width: 2,
              color: '#7AFFCC'
            },
            data: chargeData
          },
          {
            name: '充电金额',
            type: 'line',
            smooth: true,
            symbolSize: 8,
            showSymbol: true,
            itemStyle: {
              color: '#72DAFF'
            },
            lineStyle: {
              width: 2,
              color: '#72DAFF'
            },
            data: moneyData
          }
        ]
      }

      this.chart.setOption(option)
      window.addEventListener('resize', this.chart.resize)
    }
  }
}
</script>

<style scoped lang="scss">
.chart-container {
  width: 100%;
  height: 300px;
  margin-top: 60px;
  scale: 0.9;
  position: relative;
}

.total {
  z-index: 10;
  position: absolute;
  top: 10px;
  left: 7%;
  width: 100%;
  font-size: 16px;
  color: #fff;
  font-weight: bold;
  display: flex;
  font-family: 'Orbitron', sans-serif;
}
</style>
